{/* Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {BlogPostLayout, Hero} from '@react-spectrum/docs';
export default BlogPostLayout;

---
description: We are excited to announce the release of drag and drop support in React Aria and React Spectrum! This includes a suite of hooks for implementing drag and drop interactions. There is also an update to all Spectrum colors, aligning React Spectrum with the latest Spectrum designs. Finally, React Aria includes a new simplified API for overlays such as popovers and modals.
date: 2022-11-15
---

# November 15, 2022 Release

We are excited to announce the release of drag and drop support in [React Aria](react-aria:dnd) and [React Spectrum](../dnd.html)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. Check out our [blog post](react-aria:blog/drag-and-drop) for all the details!

This release also includes an update to all Spectrum colors, aligning React Spectrum with the latest Spectrum designs. Buttons also have a refreshed design, with improved accessibility, and additional variants.

React Aria also includes a new API for overlays such as [popovers](react-aria:Popover/usePopover.html) and [modals](react-aria:Modal/useModalOverlay.html). It is designed to make building these components much easier than before, including builtin focus management, accessibility, scroll locking, and positioning.

Finally, we have plenty of bug fixes and documentation updates. Thanks to all of our contributors who helped with this release 🤩

## New Features

**Drag and Drop**

- React Spectrum
    - [Introduction](../dnd.html)
    - [ListView](../ListView.html#drag-and-drop)
- React Aria
    - [Introduction](react-aria:dnd)
    - [useDrag](react-aria:useDrag)
    - [useDraggableCollection](react-aria:useDraggableCollection.html)
    - [useDrop](react-aria:useDrop)
    - [useDroppableCollection](react-aria:useDroppableCollection.html)
    - [useClipboard](react-aria:useClipboard)

**Overlay hooks**

- [usePopover](react-aria:Popover/usePopover.html)
- [useModalOverlay](react-aria:Modal/useModalOverlay.html)

## Enhancements
- Add SSR support for drag and drop - [@casperiv0](https://github.com/casperiv0) - [PR](https://github.com/adobe/react-spectrum/pull/3616)
- Export `TableCollection` and `TreeCollection` - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/3690)
- Update Spectrum colors to v6 - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/3604)
- `Button` and `ActionButton` design updates - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/3650)
- Migrate React Spectrum to new overlay hooks - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/3677)
- Add `UNSAFE_className` prop to `TableView` - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/3722)
### Spectrum color update
Spectrum design has updated their [color system](https://spectrum.adobe.com/page/color-fundamentals/) with an expanded palette, improved contrast, and increased vibrance. This update applies across all React Spectrum components automatically. You can also use the new Spectrum colors in your custom components using the [View](../View.html) component, which now has a `colorVersion` prop enabling you to opt-in. See the [styling documentation](../styling.html#color-values) for more details, and to view the full color palette.

### Design updates
Spectrum has also updated the designs for Button, ActionButton, ActionGroup, and ToggleButton  with improved contrast and accessibility. Button includes new outline and fill options, as well as new static color options. ActionButton, ActionGroup, ToggleButton, Picker, TextField, and other field components now have darker borders and selected states for improved contrast.

The Button API has been updated to add new options, and deprecate some old ones. Deprecated options will be automatically mapped to new variants.

- Added `accent` variant, replacing `cta` which is now deprecated.
- Added `style` prop, accepting `fill` or `outline` for all button variants.
- Added `staticColor` prop, which replaces the deprecated `overBackground` variant.
- Deprecated `isQuiet`.

View the updates on our [Button docs](../Button.html#visual-options) and [Spectrum Design docs](https://spectrum.adobe.com/page/button/#Accent-variant).

## Fixes
- Avoid widening "type" prop of `TextInputDOMProps` - [@jossmac](https://github.com/jossmac) - [PR](https://github.com/adobe/react-spectrum/pull/3623)
- Expose `props` to `Section` collection item - [@luisadame](https://github.com/luisadame) - [PR](https://github.com/adobe/react-spectrum/pull/3634)
- Clear slots for `ContextualHelp` slot provider for `Dialog` - [@jluyau](https://github.com/jluyau) - [PR](https://github.com/adobe/react-spectrum/pull/3635)
- Fix focus for empty view in `TableView` and `ListView` - [@ktabors](https://github.com/ktabors) - [PR](https://github.com/adobe/react-spectrum/pull/3581)
- Fix `TableView` crashing when adding/removing columns - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/3656)
- Fix `DatePicker` and `DateField` key/focus event props - [@ktabors](https://github.com/ktabors) - [PR](https://github.com/adobe/react-spectrum/pull/3605)
- Export `FocusVisibleProps` - [@warsawgentleman](https://github.com/warsawgentleman) - [PR](https://github.com/adobe/react-spectrum/pull/3639)
- Remove unneeded aria-checked from `useCheckbox` and `useSwitch` - [@tywayne](https://github.com/tywayne) - [PR](https://github.com/adobe/react-spectrum/pull/3687)
- Fix dragging in `ListView` with selectionMode set to `none` - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/3696)
- Add generic for `DatePickerStateOptions` - [@jason89521](https://github.com/jason89521) - [PR](https://github.com/adobe/react-spectrum/pull/3682)
- Update date components to use `useFocusWithin` - [@ktabors](https://github.com/ktabors) - [PR](https://github.com/adobe/react-spectrum/pull/3694)
- Wait until after a layout effect to prevent scroll in popovers - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/3697)
- Add preventDefault to onDragEnter and onDragLeave for iPad - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/3723)
- Fix types for labelProp (htmlFor) in `useTextField` - [@LosYear](https://github.com/LosYear) - [PR](https://github.com/adobe/react-spectrum/pull/3671)
- Reset `NumberField` when value is `null` - [@lishichengyan](https://github.com/lishichengyan) - [PR](https://github.com/adobe/react-spectrum/pull/3709)
- Fix `TextArea` not using full height when custom height provided - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/3720)
- Fix `useListData` so that reorder operations are correctly inserted at the correct index - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/3724)

## Docs
- Correction of a mistake in `useBreadCrumbs` - [@Zoe-CF](https://github.com/Zoe-CF) - [PR](https://github.com/adobe/react-spectrum/pull/3607)
- Display monopackage "since" version for components in React Spectrum docs - [@dannify](https://github.com/dannify) - [PR](https://github.com/adobe/react-spectrum/pull/3609)
- Add link to Spectrum styling page to docs - [@matthewdeutsch](https://github.com/matthewdeutsch) - [PR](https://github.com/adobe/react-spectrum/pull/3596)
- Update copy relating to theming - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/3622)

## Under construction
Fixes to pre-released components are listed below. Please feel free to try them out, and report any issues you encounter.

- Update `TagGroup` to use keys instead of value - [@tiffany-sy-lin](https://github.com/tiffany-sy-lin) - [PR](https://github.com/adobe/react-spectrum/pull/3692)
- Fix `ColorWheel` layout in a `Form` - [@lishichengyan](https://github.com/lishichengyan) - [PR](https://github.com/adobe/react-spectrum/pull/3705)
- Update `TagGroup` types - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/3728)

### TagGroup updates
We have made improvements to the `TagGroup` component, and it is now entering beta. This includes a few breaking changes.

- `isDisabled` and `disabledKeys` props have been removed.
- `isRemovable` has been renamed to `allowsRemoving`.
- `onRemove` now passes the removed key instead of its children and press event.


## Released packages

```
- @adobe/react-spectrum@3.23.0
- @react-aria/accordion@3.0.0-alpha.13
- @react-aria/actiongroup@3.4.3
- @react-aria/aria-modal-polyfill@3.6.1
- @react-aria/autocomplete@3.0.0-alpha.12
- @react-aria/breadcrumbs@3.4.0
- @react-aria/button@3.6.3
- @react-aria/calendar@3.0.4
- @react-aria/checkbox@3.7.0
- @react-aria/color@3.0.0-beta.17
- @react-aria/combobox@3.4.3
- @react-aria/datepicker@3.2.0
- @react-aria/dialog@3.4.1
- @react-aria/dnd@3.0.0
- @react-aria/focus@3.10.0
- @react-aria/grid@3.5.1
- @react-aria/gridlist@3.1.1
- @react-aria/i18n@3.6.2
- @react-aria/interactions@3.13.0
- @react-aria/label@3.4.3
- @react-aria/landmark@3.0.0-alpha.4
- @react-aria/link@3.3.5
- @react-aria/listbox@3.7.1
- @react-aria/menu@3.7.0
- @react-aria/meter@3.3.3
- @react-aria/numberfield@3.3.3
- @react-aria/overlays@3.12.0
- @react-aria/progress@3.3.3
- @react-aria/radio@3.4.1
- @react-aria/searchfield@3.4.3
- @react-aria/select@3.8.3
- @react-aria/selection@3.12.0
- @react-aria/separator@3.2.5
- @react-aria/slider@3.2.3
- @react-aria/spinbutton@3.2.0
- @react-aria/ssr@3.4.0
- @react-aria/switch@3.3.0
- @react-aria/table@3.6.0
- @react-aria/tabs@3.3.3
- @react-aria/tag@3.0.0-beta.0
- @react-aria/textfield@3.8.0
- @react-aria/toggle@3.4.1
- @react-aria/tooltip@3.3.3
- @react-aria/utils@3.14.1
- @react-aria/virtualizer@3.6.0
- @react-aria/visually-hidden@3.6.0
- @react-spectrum/accordion@3.0.0-alpha.14
- @react-spectrum/actionbar@3.0.0-alpha.14
- @react-spectrum/actiongroup@3.7.1
- @react-spectrum/autocomplete@3.0.0-alpha.12
- @react-spectrum/avatar@3.0.0-alpha.11
- @react-spectrum/badge@3.0.1
- @react-spectrum/breadcrumbs@3.6.0
- @react-spectrum/button@3.11.0
- @react-spectrum/buttongroup@3.5.0
- @react-spectrum/calendar@3.1.3
- @react-spectrum/card@3.0.0-alpha.13
- @react-spectrum/checkbox@3.6.1
- @react-spectrum/color@3.0.0-beta.17
- @react-spectrum/combobox@3.7.0
- @react-spectrum/contextualhelp@3.4.0
- @react-spectrum/datepicker@3.3.0
- @react-spectrum/dialog@3.6.0
- @react-spectrum/divider@3.4.3
- @react-spectrum/dnd@3.0.0
- @react-spectrum/form@3.5.1
- @react-spectrum/icon@3.6.2
- @react-spectrum/illustratedmessage@3.3.3
- @react-spectrum/image@3.3.3
- @react-spectrum/label@3.9.0
- @react-spectrum/labeledvalue@3.0.1
- @react-spectrum/layout@3.4.3
- @react-spectrum/link@3.4.3
- @react-spectrum/list@3.2.0
- @react-spectrum/listbox@3.8.1
- @react-spectrum/menu@3.9.0
- @react-spectrum/meter@3.3.3
- @react-spectrum/numberfield@3.5.0
- @react-spectrum/overlays@4.0.0
- @react-spectrum/picker@3.9.0
- @react-spectrum/progress@3.3.3
- @react-spectrum/provider@3.6.0
- @react-spectrum/radio@3.4.1
- @react-spectrum/searchfield@3.6.0
- @react-spectrum/searchwithin@3.0.0-alpha.12
- @react-spectrum/slider@3.4.0
- @react-spectrum/statuslight@3.4.3
- @react-spectrum/switch@3.3.3
- @react-spectrum/table@3.5.0
- @react-spectrum/tabs@3.3.3
- @react-spectrum/tag@3.0.0-beta.0
- @react-spectrum/text@3.3.3
- @react-spectrum/textfield@3.9.0
- @react-spectrum/theme-dark@3.4.0
- @react-spectrum/theme-default@3.4.0
- @react-spectrum/theme-express@3.0.0-alpha.0
- @react-spectrum/theme-light@3.3.0
- @react-spectrum/tooltip@3.3.3
- @react-spectrum/utils@3.8.0
- @react-spectrum/view@3.4.0
- @react-spectrum/well@3.3.3
- @react-stately/calendar@3.0.4
- @react-stately/checkbox@3.3.1
- @react-stately/collections@3.5.0
- @react-stately/color@3.2.1
- @react-stately/combobox@3.3.0
- @react-stately/data@3.8.0
- @react-stately/datepicker@3.2.0
- @react-stately/dnd@3.0.0
- @react-stately/grid@3.4.1
- @react-stately/layout@3.9.0
- @react-stately/list@3.6.0
- @react-stately/menu@3.4.3
- @react-stately/numberfield@3.3.0
- @react-stately/overlays@3.4.3
- @react-stately/radio@3.6.1
- @react-stately/searchfield@3.3.3
- @react-stately/select@3.3.3
- @react-stately/selection@3.11.1
- @react-stately/slider@3.2.3
- @react-stately/table@3.6.0
- @react-stately/tabs@3.2.3
- @react-stately/toggle@3.4.3
- @react-stately/tooltip@3.2.3
- @react-stately/tree@3.4.0
- @react-stately/virtualizer@3.4.0
- @react-types/accordion@3.0.0-alpha.11
- @react-types/actionbar@3.0.0-alpha.11
- @react-types/actiongroup@3.3.5
- @react-types/autocomplete@3.0.0-alpha.10
- @react-types/avatar@3.0.0-alpha.10
- @react-types/badge@3.0.1
- @react-types/breadcrumbs@3.4.5
- @react-types/button@3.7.0
- @react-types/buttongroup@3.2.5
- @react-types/calendar@3.0.4
- @react-types/card@3.0.0-alpha.11
- @react-types/checkbox@3.4.1
- @react-types/color@3.0.0-beta.14
- @react-types/combobox@3.5.5
- @react-types/contextualhelp@3.1.5
- @react-types/datepicker@3.1.3
- @react-types/dialog@3.4.5
- @react-types/divider@3.2.5
- @react-types/form@3.4.1
- @react-types/grid@3.1.5
- @react-types/illustratedmessage@3.2.5
- @react-types/image@3.2.5
- @react-types/label@3.7.1
- @react-types/layout@3.3.5
- @react-types/link@3.3.5
- @react-types/list@3.1.1
- @react-types/listbox@3.3.5
- @react-types/menu@3.7.3
- @react-types/meter@3.2.5
- @react-types/numberfield@3.3.5
- @react-types/overlays@3.6.5
- @react-types/progress@3.2.5
- @react-types/provider@3.5.5
- @react-types/radio@3.3.1
- @react-types/searchfield@3.3.5
- @react-types/searchwithin@3.0.0-alpha.10
- @react-types/select@3.6.5
- @react-types/shared@3.16.0
- @react-types/slider@3.3.1
- @react-types/statuslight@3.2.5
- @react-types/switch@3.2.5
- @react-types/table@3.3.3
- @react-types/tabs@3.1.5
- @react-types/tag@3.0.0-beta.0
- @react-types/text@3.2.5
- @react-types/textfield@3.6.1
- @react-types/tooltip@3.2.5
- @react-types/view@3.3.0
- @react-types/well@3.2.5
- @spectrum-icons/color@3.4.4
- @spectrum-icons/express@3.0.0-alpha.0
- @spectrum-icons/illustrations@3.5.1
- @spectrum-icons/ui@3.4.0
- @spectrum-icons/workflow@4.0.4
- react-aria@3.21.0
- react-stately@3.19.0
```

